<!--
 * @Author: qianl
 * @Date: 2024-01-26 16:05:55
 * @LastEditors: qianl
 * @LastEditTime: 2024-01-29 16:13:24
 * @FilePath: \internal-website-jxg\src\views\Home\module\appCenter.vue
 * 
-->
<template>
<div class="container">
  <homeCard @goMore="goMore">
    <span slot="title">
       <i class="iconfont icon-yingyong home-card-title-i"></i>
      <span class="home-card-title">应用中心</span>
    </span>
    <div class="appBox" v-if="list.length!=0">
      <appItem :params="item" v-for="(item,index) in list" :key="index"></appItem>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="appBox2" v-if="list.length==0">
      <img src="../../../assets/noApp.png" alt="">
    </div>

  </homeCard>
</div>
</template>

<script>
import homeCard from "@/views/Home/module/homeCard";
import appItem from "@/views/Home/module/appItem";
export default {
  name: "appCenter",
  components:{
    homeCard,
    appItem
  },
  data(){
    return {
      list:[]
    }
  },
  mounted() {
    this.queryApplicationCenterList()
  },
  methods:{
    goMore(){
      this.$router.push({name:'application'})
    },
    queryApplicationCenterList(){
      this.$api.showApplicationCenterList({page:0,pageSize:9}).then(res=>{
        this.list = res.data
      })
    },
  },
}
</script>

<style scoped lang="less">
.container{
  width: 44.7rem;
  height: 43.7rem;
  // height: 48.7rem;
  .appBox{
    display: flex;
    padding-top: 2rem;
    flex-wrap: wrap;justify-content: space-between;
  }
  .appBox2{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40rem;
    img{
      width: 20rem;
    }
  }
  .box{
    width: 30%;
    height: 8.5rem;
  }
}
</style>